<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>秋宝</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            height: 100%;
        }

        body {
            background-image: url("./image/13dabe2fdc8a445d489f873792873501.jpg");
            background-size: 100% 100%;
        }

        #box {
            width: 280px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            animation: go 45s linear infinite;
        }

        #box img {
            width: 280px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #box img:nth-child(1) {
            transform: rotateY(0deg) translateZ(650px);
        }

        #box img:nth-child(2) {
            transform: rotateY(36deg) translateZ(650px);
        }

        #box img:nth-child(3) {
            transform: rotateY(72deg) translateZ(650px);
        }

        #box img:nth-child(4) {
            transform: rotateY(108deg) translateZ(650px);
        }

        #box img:nth-child(5) {
            transform: rotateY(144deg) translateZ(650px);
        }

        #box img:nth-child(6) {
            transform: rotateY(180deg) translateZ(650px);
        }

        #box img:nth-child(7) {
            transform: rotateY(216deg) translateZ(650px);
        }

        #box img:nth-child(8) {
            transform: rotateY(252deg) translateZ(650px);
        }

        #box img:nth-child(9) {
            transform: rotateY(288deg) translateZ(650px);
        }

        #box img:nth-child(10) {
            transform: rotateY(324deg) translateZ(650px);
        }

        @keyframes go {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }

            25% {
                transform: rotateX(20deg) rotateY(180deg);
            }

            50% {
                transform: rotateX(0deg) rotateY(360deg);
            }

            75% {
                transform: rotateX(-20deg) rotateY(540deg);
            }

            100% {
                transform: rotateX(0deg) rotateY(720deg);
            }

        }
    </style>
</head>

<body>
    <div id="box">
        <img src="./image/微信图片_20210111173500.jpg">
        <img src="./image/fc3b42a53a64571a1e631f3971f65c7.jpg">
        <img src="./image/5270678913905c887493b3fdb34b45e.jpg">
        <img src="./image/83bdddfb24bce49cb7d51e1da8c0a60.jpg">
        <img src="./image/36bda40489daab8a5918dd6284e318c.jpg">
        <img src="./image/1a45d784a4c179782f472ce3cd9a6be.jpg">
        <img src="./image/cdb1dc0050ba0e7932cc5f6dca826dc.jpg">
        <img src="./image/9c02c733d50025eae02894da1aa9190.jpg">
        <img src="./image/f19ac5dec489ab04440e38f54ac03d8.jpg">
        <img src="./image/6d69a92fb19dce8fab6d2556e4c7ead.jpg">
    </div>
    <audio autoplay>
        <source src="./MOUMOU酱 - 白月光与朱砂痣 (热搜女声混剪).mp3">
    </audio>
</body>

<script type="text/javascript">
    function music() {
        var audio = document.createElement("audio");
        audio.src = "C:/Users/ZGNET/Desktop/图片/life.mp3";
        audio.play();
    }
    window.onload = music;
</script>

</html>